<template>
  <div class="my-tasks">
    <HeaderBar title="我发布的" @back="goBack" />
    <van-search v-model="search" placeholder="请输入..." class="search-bar" @update:model-value="onSearch" />
    <div class="task-list">
      <TaskCard v-for="task in filteredTasks" :key="task.id" :task="task" showMore @click="goDetail(task.id)" @more="onMore(task)" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTaskStore } from '../store/index.js'
import HeaderBar from '../components/HeaderBar.vue'
import TaskCard from '../components/TaskCard.vue'
const router = useRouter()
const store = useTaskStore()
const search = ref('')
const filteredTasks = computed(() => store.myTasks.filter(t => {
  if (!search.value) return true
  return t.title.includes(search.value) || t.content.includes(search.value) || t.author.includes(search.value)
}))
function goBack() { router.back() }
function goDetail(id) { router.push(`/task/${id}`) }
function onMore(task) { /* 跳转管理页面或弹窗 */ }
function onSearch(val) { search.value = val }
</script>
<style scoped>
.my-tasks { min-height: 100vh; background: #fafbfa; }
.search-bar { margin: 0 16px 12px 16px; border-radius: 24px; overflow: hidden; z-index: 2; position: relative; }
.task-list { position: relative; z-index: 2; margin-top: 8px; }
</style> 